<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="20rem"
    @onCommit="handleSubmit"
    @onCloesa="closeDlog"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item label-width="auto" label="人员姓名：" prop="name">
              <el-select
                v-model="form.name"
                placeholder="--请选择--"
                @change="changeSelect"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <!-- <el-input v-model="form.name" placeholder="请输入…"></el-input> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ListId,
  ListSave,
  selectAllPerson,
  saveArrangeRecord
} from '@/api/dutyManagement'
import store from '@/store'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  rowIndex: {
    type: String,
    default: ''
  },
  rowName: {
    type: String,
    default: ''
  },
  rowTime: {
    type: Array,
    default: () => []
  }
})
const options = ref([])

const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  name: ''
})
const personName = ref({
  name: '',
  id: ''
})
const rules = reactive({
  name: [
    {
      required: true,
      message: '人员姓名不能为空',
      trigger: 'blur'
    }
  ]
})
const closeDlog = () => {
  emits('onCloes')
}
const gettie = () => {
  var dataTime = new Date()
}
gettie()
// 下拉框
const changeSelect = (e) => {
  console.log('options', options.value)
  console.log('e', e)
  options.value.map((item, index) => {
    if (item.id === e) {
      personName.value.name = item.name
      personName.value.id = item.id
      console.log('item', item)
    }
  })
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
      console.log('验证通过')
    } else {
      console.log('验证错误')
      return false
    }
  })
}

const save = async (data) => {
  console.log('data', data)
  console.log('props.rowData', props.rowData)
  console.log('rowName', props.rowName)
  console.log('form', form.value)
  if (props.rowName) {
    console.log('setMsg====', setMsg())
    let data = setMsg()
    const res = await saveArrangeRecord(data)
    emits('onReload')
    console.log('res=======', res)
  } else {
    ElMessage({
      message: '请选中一个值班类型',
      type: 'warning'
    })
  }
}
const setMsg = () => {
  const data = {
    arrangeType: props.rowName,
    list: [
      {
        arrangeList: [],
        personId: personName.value.id,
        personName: personName.value.name
      }
    ]
  }
  data.list[0].arrangeList = new Array(props.rowTime.length).fill({
    date: '',
    id: '',
    leader: false,
    type: '01'
  })
  data.list[0].arrangeList.map((item) => {
    props.rowTime.map((itema) => {
      item.date = itema
    })
  })
  return data
}
const getlamp = async (id) => {
  const res = await ListId({ id })
  return res
}
const getPeople = async () => {
  const res = await selectAllPerson()
  options.value = res
  console.log('res', res)
}
getPeople()
watch(
  () => props.rowData,
  () => {
    console.log('props.rowData', props.rowData)
    console.log('props.rowName', props.rowName)
    if (props.rowData.planId) {
      const rowDataP = getlamp(props.rowData.planId)
      //这里只回显一个，演示用，具体逻辑先不管了
      rowDataP.then((rowData) => {})
    } else {
      clearForm()
    }
  }
)
watch(
  () => props.rowName,
  () => {
    console.log('props.rowName', props.rowName)
  }
)

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.value = {}
}
</script>

<style lang="scss" scoped>
// :deep .el-input__inner {
//   width: 80% !important;
// }
</style>
